<template>
	<view class="content">
		<view class="info">
			<view style="margin-bottom: 20rpx; font-size: 15px; font-weight: 600">
				[{{ projectInfo.transferMethodName ? projectInfo.transferMethodName : '暂无' }}]{{ projectInfo.projectName }}
			</view>
			<view v-show="detail.transferMethodName != '转让'" style="color: #828282ff; font-size: 13px">
				流转期限：{{ detail.startDate ? detail.startDate + '至' + detail.endDate : '暂无' }}
			</view>
			<!-- <view style="margin-bottom: 20rpx; color: #828282ff; font-size: 13px"
        >流转期限：2022-01-01 至 2023-01-01</view
      > -->
			<view style="color: #828282ff; font-size: 15px; margin: 10rpx 0">发布时间：{{ projectInfo.issueTime }}</view>
			<view style="font-size: 15px; color: #df5500ff; font-weight: 600">挂牌价格：{{ projectInfo.listingPrice + projectInfo.unitName }}</view>
		</view>
		<view style="width: 100%; height: 20rpx; background-color: #d3d3d352; margin-bottom: 20rpx"></view>
		<view class="main-part">
			<view style="margin-bottom: 28rpx; font-size: 13px; color: #222222">距{{ projectInfo.transactions == 0 ? '自由竞价' : '阶梯竞价' }}期截止时间还有</view>
			<countdown-timer :time="countDown" :autoStart="true" ref="myTimer">
				<template v-slot="{ day, hour, minute, second }">
					<view style="margin-bottom: 28rpx">
						<text style="font-size: 28px; font-weight: 600">{{ day <= 0 ? 0 : day }}</text>
						<text style="font-size: 17px">天</text>
						<text style="font-size: 28px; font-weight: 600">{{ hour <= 0 ? 0 : hour }}</text>
						<text style="font-size: 17px">时</text>
						<text style="font-size: 28px; font-weight: 600">{{ minute <= 0 ? 0 : minute }}</text>
						<text style="font-size: 17px">分</text>
						<text style="font-size: 28px; font-weight: 600">{{ second <= 0 ? 0 : second }}</text>
						<text style="font-size: 17px">秒</text>
					</view>
				</template>
			</countdown-timer>

			<view style="margin-bottom: 10rpx; font-size: 18px; color: #222222; font-weight: 600">当前有效报价: {{ peakPrice }} 元(总价)</view>
			<view style="font-size: 18px; color: #222222; font-weight: 600">您当前的报价: {{ nowUserPeakPrice }}元(总价)</view>
		</view>
		<view style="width: 100%; height: 20rpx; background-color: #d3d3d352; margin-bottom: 0rpx"></view>
		<view class="operate">
			<view style="display: flex; height: 80rpx">
				<view
					style="
						background-color: #0c6bff;
						color: white;
						width: 140rpx;
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 10rpx 0rpx 0rpx 10rpx;
					"
					v-if="projectInfo.transactions != 0"
					@click="reduce"
				>
					减少
				</view>
				<view style="border: 1px solid #d7d7d7ff">
					<input
						:disabled="projectInfo.transactions != 0"
						v-model="geijia"
						type="digit"
						:style="{
							width: projectInfo.transactions != 0 ? '300rpx' : '500rpx'
						}"
						style="text-align: center; height: 100%; font-size: 16px"
					/>
				</view>
				<view
					style="
						background-color: #0c6bff;
						color: white;
						width: 140rpx;
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 0rpx 10rpx 10rpx 0rpx;
					"
					v-if="projectInfo.transactions != 0"
					@click="augment"
				>
					增加
				</view>
			</view>
			<view style="font-size: 16px; color: #000000; margin-top: 20rpx; font-weight: bold">您的报价:{{ formattergeijia }}元(总价)</view>
			<view
				style="
					width: 90%;
					height: 70rpx;
					background-color: #0c6bff;
					color: white;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 10rpx;
					margin-top: 40rpx;
				"
				@click="baojia"
			>
				提交报价
			</view>
		</view>
		<view class="operate-info">
			<view style="font-size: 13px; color: #828282ff; margin-bottom: 20rpx">项目编号:{{ projectInfo.xmbh }}</view>
			<view style="font-size: 13px; color: #828282ff; margin-bottom: 20rpx">交易方式:{{ projectInfo.transactions == 0 ? '自由竞价' : '阶梯竞价' }}</view>
			<view style="font-size: 13px; color: #828282ff; margin-bottom: 20rpx">竞价方式:{{ projectInfo.biddingType == 0 ? '反向竞价' : '正向竞价' }}</view>
		</view>
		<view class="tips" style="color: #828282ff; font-size: 13px">
			<view>提示:</view>
			<view style="margin-top: 20rpx">1.报价时间内可以多次提交报价，报价方最后一次有效报价为此次竞价的最后出价。</view>
			<view style="margin-top: 10rpx">
				2.竞价期最后1分钟有报价方报价，则进入延时竞价期，本次竞价可由多个延时竞价期组成，每个延时竞价周期为1分钟，直至在一个延时竞价周期内没有新的有效报价，则此次竞价结束
			</view>
		</view>
		<view style="width: 100%; height: 20rpx; background-color: #d3d3d352; margin-bottom: 20rpx"></view>
	</view>
</template>

<script>
import { electBidding, supplyProject } from '@/utils/api.js';
import Nzh from 'nzh';

export default {
	data() {
		return {
			statu: 1,
			projectInfo: {},
			peakPrice: 0,
			nowUserPeakPrice: 0,
			geijia: 0,
			formattergeijia: '',
			ladderPrice: 0,
			remainTime: 0,
			detail: {},
			timer: {},
			countDown: 0,
			boundaryMoney: 0
		};
	},
	onLoad(e) {
		if (e.data) {
			let data = JSON.parse(e.data);
			this.projectInfo = data;
			console.log(data);
			this.ladderPrice = data.ladderPrice;
			this.getBiddingPrice();
			this.getPMBPrice();
			this.getDetail();
			this.goGetBiddingPriceGap();
			////苹果手机 ios设备中 new Date ( 2022-09-08 10:58:31) 这样不支持
			///再ios设备中 new Date ( 2022/09/08 10:58:31) 这样才支持
			// let timeStr = data.biddingEndTime.replace(/\-/g, '/');
			// let assignTime = new Date(timeStr);
			// let nowTime = new Date();
			// this.countDown = Number(assignTime.getTime()) - Number(nowTime.getTime());
			this.goGetProjectBiddingEndTime();
		}
	},
	methods: {
		///////获取提交价格时的临界值
		goGetBiddingPriceGap() {
			let params = {};
			electBidding
				.getBiddingPriceGap(params)
				.then((res) => {
					if (res.code == 1000) {
						this.boundaryMoney = res.data.biddingPriceGap;
					}
				})
				.catch((error) => {
					console.log(error);
				});
		},
		async getDetail() {
			let res = await supplyProject.getDetail({
				projectId: this.projectInfo.id,
				dataId: this.projectInfo.dataId,
				dataType: this.projectInfo.dataType
			});
			console.log('详细信息', res);
			this.detail = res.data.main;
		},
		// 获取此用户当前给出最高价
		async getBiddingPrice() {
			let res = await electBidding.getBiddingPrice({
				dataId: this.projectInfo.dataId,
				dataType: this.projectInfo.dataType,
				biddingType: this.projectInfo.biddingType
			});
			console.log('当前用户最高价', res.data);
			this.nowUserPeakPrice = res.data;
		},
		////获取项目结束时间
		goGetProjectBiddingEndTime() {
			electBidding
				.getProjectBiddingEndTime({
					dataId: this.projectInfo.dataId,
					dataType: this.projectInfo.dataType
				})
				.then((res) => {
					if (res.code == 1000) {
						let timeStr = res.data.biddingEndTime.replace(/\-/g, '/');
						let assignTime = new Date(timeStr);
						let nowTime = new Date();
						this.countDown = Number(assignTime.getTime()) - Number(nowTime.getTime());
						if (this.countDown <= 0) {
							clearInterval(this.timer);
						}
					} else {
						return;
					}
				})
				.catch((error) => {
					console.log(error);
				});
		},
		////定时刷新最高报价
		getPMBPrice() {
			this.timer = setInterval(async () => {
				await this.getProjectMaxBidPrice();
			}, 1000);
		},
		// 获取当前项目给出的最高价
		async getProjectMaxBidPrice() {
			let that = this;
			let res = await electBidding.getProjectMaxBidPrice({
				dataId: that.projectInfo.dataId,
				dataType: that.projectInfo.dataType
			});
			console.log('项目最高价', res.data);
			//this.peakPrice = res.data;

			if (res.data != 0) {
				if (res.data != that.peakPrice) {
					that.peakPrice = res.data;
					that.geijia = that.peakPrice;

					electBidding
						.getProjectBiddingEndTime({
							dataId: that.projectInfo.dataId,
							dataType: that.projectInfo.dataType
						})
						.then((res) => {
							if (res.code == 1000) {
								let timeStr = res.data.biddingEndTime.replace(/\-/g, '/');
								let assignTime = new Date(timeStr);
								let nowTime = new Date();
								that.countDown = Number(assignTime.getTime()) - Number(nowTime.getTime());
								if (that.countDown <= 0) {
									clearInterval(that.timer);
								}
							} else {
								return;
							}
						})
						.catch((error) => {
							console.log(error);
						});
				}
			} else {
				that.peakPrice = that.projectInfo.listingPrice;
				if (!that.geijia) {
					that.geijia = that.projectInfo.listingPrice;
				}
			}
		},
		// 获取当前项目给出的最高价
		async getProjectMaxBidPrice1() {
			let res = await electBidding.getProjectMaxBidPrice({
				dataId: this.projectInfo.dataId,
				dataType: this.projectInfo.dataType
			});
			console.log('项目最高价', res.data);
		},

		guoqi() {
			let nowTime = new Date();
			let projectTime = new Date(this.projectInfo.biddingEndTime);
			if (this.countDown <= 0) {
				uni.showToast({
					title: '竞价已结束',
					duration: 2000,
					icon: 'none'
				});
				uni.navigateBack({
					delta: 1
				});
				return true;
			} else {
				console.log('竞价进行中');
				return false;
			}
		},
		baojia() {
			let that = this;
			if (that.guoqi()) {
				return;
			}
			that.getProjectMaxBidPrice();
			// // 正向竞价
			// if (this.projectInfo.biddingType == 1) {
			//   if (this.projectInfo.listingPrice < this.peakPrice) {
			//     if (this.geijia <= this.peakPrice) {
			//       uni.showToast({
			//         title: "提交价格必须高于项目当前最高价",
			//         duration: 2000,
			//         icon: "none",
			//       });
			//       return;
			//     }
			//   } else {
			//     if (this.geijia < this.projectInfo.listingPrice) {
			//       uni.showToast({
			//         title: "提交价格必须高于挂牌价格",
			//         duration: 2000,
			//         icon: "none",
			//       });
			//       return;
			//     }
			//   }
			// } else {
			//   // 反向竞价
			//   if (this.projectInfo.listingPrice > this.peakPrice) {
			//     if (this.geijia >= this.peakPrice) {
			//       console.log(this.geijia, this.peakPrice);
			//       uni.showToast({
			//         title: "提交价格必须低于项目当前价",
			//         duration: 2000,
			//         icon: "none",
			//       });
			//       return;
			//     }
			//   } else {
			//     if (this.geijia > this.projectInfo.listingPrice) {

			//     }
			//   }
			// }
			if (that.geijia <= 0) {
				uni.showToast({
					title: '竞拍价格不能为空且大于0',
					duration: 2000,
					icon: 'none'
				});
				return;
			}
			if (Math.abs(Number(that.geijia) - Number(that.peakPrice)) >= Number(that.boundaryMoney)) {
				uni.showModal({
					title: '提示',
					content: '是否确认提交?',
					cancelText: '取消',
					confirmText: '确认',
					success: function (res) {
						if (res.confirm) {
							electBidding
								.projectBid({
									projectId: that.projectInfo.id,
									bidPrice: that.geijia
								})
								.then((res) => {
									if (res.code == 1000) {
										that.nowUserPeakPrice = that.geijia;
										that.getProjectMaxBidPrice();
										uni.showToast({
											title: res.message,
											duration: 2000,
											icon: 'none'
										});
									} else {
										uni.showToast({
											title: res.message,
											duration: 2000,
											icon: 'none'
										});
									}
								})
								.catch((error) => {
									console.log(error);
								});
						} else if (res.cancel) {
							uni.showToast({
								title: '已取消',
								duration: 2000,
								icon: 'none'
							});
						}
					}
				});
			} else {
				electBidding
					.projectBid({
						projectId: that.projectInfo.id,
						bidPrice: that.geijia
					})
					.then((res) => {
						if (res.code == 1000) {
							that.nowUserPeakPrice = that.geijia;
							that.getProjectMaxBidPrice();
							uni.showToast({
								title: res.message,
								duration: 2000,
								icon: 'none'
							});
						} else {
							uni.showToast({
								title: res.message,
								duration: 2000,
								icon: 'none'
							});
						}
					})
					.catch((error) => {
						console.log(error);
					});
				console.log('aaa', res);

				//that.getBiddingPrice();
			}
		},
		reduce() {
			this.geijia = this.geijia - this.ladderPrice;
		},
		augment() {
			this.geijia = this.geijia + this.ladderPrice;
		}
	},
	watch: {
		geijia: {
			handler(newName, oldName) {
				this.formattergeijia = Nzh.cn.encodeB(newName);
			},
			immediate: true
		}
	}
};
</script>

<style scoped lang="less">
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	.info {
		width: 93%;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}
	.main-part {
		width: 93%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 30rpx;
		padding-top: 30rpx;
	}
	.operate {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 20rpx;
	}
	.record {
		display: flex;
		margin-bottom: 100rpx;
		flex-direction: column;
		width: 93%;
		.record-bid {
			width: 100%;
		}
	}
	.tips {
		padding-bottom: 40rpx;
		width: 93%;
		margin-top: 30rpx;
	}
	.operate-info {
		width: 93%;
		margin-top: 60rpx;
	}
}
</style>
